<template>
    <div class="usercenternjr">
        <div class="usercenter">
             <LoginHeader>
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <span slot="title">个人中心</span>
        <span slot="more"></span>
        </LoginHeader><!-- 个人信息 -->
        <div class="headerpic" v-if="path=='/usercenter/userinfo'">
            <div>
        <img src="@/assets/njrpic/usercenterpic/userpic.png" alt="" @click="open" >
            </div>
            <input type="text" v-model="username" v-if="showinput"  @keypress.enter="edituser" @blur="edituser">
        <span @click="editusername"  v-else >{{this.$store.state.username}}</span>
       <i class="el-icon-edit-outline" @click="editusername" v-show="!showinput"></i>
        </div>
        <!-- 金币记录 -->
        <div class="headerpic" v-else-if="(path=='/usercenter/coincord/input')||(path=='/usercenter/coincord/output')">
            <div>
        <img src="@/assets/njrpic/usercenterpic/coinpic.png" alt="">
            </div>
        <span>{{coin}}</span>
        <i class="el-icon-refresh" ></i>
        </div>
        <!-- 刷牙闹钟 -->
         <div class="headerpic" v-else-if="path=='/usercenter/clock'">
            <div>
        <img src="@/assets/njrpic/usercenterpic/clockpic.png" alt="">
            </div>
        <i class="el-icon-circle-plus-outline" @click="pushnewclock" ></i>
        </div>
        <!-- 权利中心 -->
         <div class="headerpic" v-else-if="path=='/usercenter/power'">
            <div>
        <img src="@/assets/njrpic/usercenterpic/powerpic.png" alt="">
            </div>
        </div>
        <!-- 子路由区域 -->
         <div class="usernav" >
            <router-link tag="span" :to="item.linkto" v-for="(item,index) in info" :key="index" :class="(path==item.linkto)||(path==item.linkto2)?'active':''">{{item.name}}</router-link>
        </div>
        </div>
       <router-view/>
       <el-drawer :modal='false' :with-header="false" :show-close='false' :visible.sync="drawer"
  :direction="direction">
  <div class="takepic">
     <el-card class="box-card">
  <div slot="header" class="clearfix">
    <p>拍照</p>
  </div>
    <p>从手机相册选择</p>
</el-card>
 <el-card class="box-card">
      <p @click="canceldrawer">取消</p>
</el-card>
  </div>
 

</el-drawer>

    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
            info:[
                {name:'个人信息',linkto:'/usercenter/userinfo'},
                {name:'金币记录',linkto:'/usercenter/coincord/input',linkto2:'/usercenter/coincord/output'},
                {name:'刷牙闹钟',linkto:'/usercenter/clock'},
                {name:'权利中心',linkto:'/usercenter/power'},
            ],
            path:'/usercenter/userinfo',
            coin:'',
              drawer: false,
        direction: 'btt',
        showinput:false,
        username:this.$store.state.username
        }
    },
    watch:{
        $route(to,from){
            this.path=to.path
        }
    },
    components:{
        LoginHeader
    },
    methods:{
        goback(){
            this.$router.push('/index')
        },
        open(){
            this.drawer=true
        },
        canceldrawer(){
            this.drawer=false
        },
        editusername(){
            this.showinput=true
        },
         edituser(){
            this.$http.put('/api/users/'+this.$store.state.id,{username:this.username})
            .then(({
                data,config
            })=>{
                console.log(data,config);
                if(data.code==200){
                    this.$message.success('修改用户名成功')
                    this.$store.commit('getusername',this.username)
                }else{
                    this.$message.error('修改用户名失败')
                }
            })
            this.showinput=false
        },
        pushnewclock(){
            
        }
    },
    mounted(){
        this.$http.get('/api/users/'+this.$store.state.username).then(({
            data,config
        })=>{
            console.log(data,config);
            if(data.code==200){
                console.log('查询成功');
                this.coin=data.data.coin
            }else{
                console.log('查询失败');
            }
        })
    }
}
</script>
<style lang="less" scoped>
.usercenter{
    background-image: url('../../assets/njrpic/usercenterpic/account_rectangle.png');
   background-size:100% 100%;
    text-align: center;
    color: white;
.headerpic{
    margin: 50px 0;
    img{
        // border: 1px solid white;
        border-radius: 50%;
    }
    input{
        outline: 0;
        border: none;
        background-color: transparent;
        color: white;
        text-align: center;
    }
}
.usernav{
    display: flex;
    margin: 10px 0;
    padding: 5px;
    // background-color: violet;
    span{
        flex:1;
        padding:15px;
        // background-color: yellow;
        border-radius:40px ;
    }
}
}
    .active{
        color: #b494fa;
        background-color: white;
    }
    .takepic{
        padding: 40px;
        text-align: center;
        .el-card{
            border-radius: 35px;
            margin-top: 25px;
        }
    }
</style>
<style lang="less">
.usercenternjr{
    background-color: #f0f0f0;
    .el-drawer__body {
    flex: 1;
    background-color: #dcdbdb;
}
}
</style>